<template>
  <div class="ConMediation">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
          <div class="backIcon" @click="back">
            <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
          </div>
          <div class="theme">矛盾调解</div>
        </div>-->
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <!--      <div class="carousel">-->
      <!--        <img :src="imgs[6]" />-->
      <!--      </div>-->
      <!-- 轮播图 -->
      <van-swipe class="carousel" :autoplay="3000">
        <van-swipe-item class="carItem" v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="entranceList">
        <van-list class="entranceBox" :finished="true">
          <div class="entranceRow" @click="conMediationTo(0)">
            <div class="lpIcon">
              <img :src="imgs[0]" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">法律知识</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="conMediationTo(4)">
            <div class="lpIcon">
              <img :src="imgs[0]" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">文书范本</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="conMediationTo(1)">
            <div class="lpIcon">
              <img :src="imgs[1]" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">典型案例</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <!-- <div class="entranceRow" @click="conMediationTo(2)">
                <div class="lpIcon">
                  <img :src="imgs[2]" />
                </div>
                <div class="rpIcon">
                  <div class="rpBox">
                    <div class="title">常见问题</div>
                    <div class="iconPt">
                      <img :src="imgs[5]" />
                    </div>
                  </div>
                  <van-divider class="reDivider" />
                </div>
              </div>-->
          <div class="entranceRow" @click="conMediationTo(3)">
            <!-- v-if="isShow"-->
            <div class="lpIcon">
              <img :src="imgs[3]" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">法律顾问</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <!-- <div class="entranceRow" @click="conMediationTo(8)">
                <div class="lpIcon">
                  <img src="@/assets/newhome/yjt.png" />
                </div>
                <div class="rpIcon">
                  <div class="rpBox">
                    <div class="title">一键通</div>
                    <div class="iconPt">
                      <img :src="imgs[5]" />
                    </div>
                  </div>
                  <van-divider class="reDivider" />
                </div>
              </div> -->
        </van-list>
      </div>
    </div>
    <!-- 底部页面操作栏 -->
    <div class="bottom-con">
      <div class="actionBar">
        <van-button type="info" @click="skipOther1" class="but">我要信访</van-button>
        <van-button type="info" @click="skipOther2" class="but">我要调解</van-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "ConMediation",
    data() {
      return {
        imgs: [
          require("../../assets/MDJF/1.png"),
          require("../../assets/MDJF/mdjf1.png"),
          require("../../assets/transfer/transfer-ico(3).png"),
          require("../../assets/transfer/transfer-ico(4).png"),
          require("../../assets/transfer/transfer-bg.jpg"),
          require("../../assets/transfer/backIcon.png")
        ],
        images: [
          require("../../assets/MDJF/12.jpg"),
          require("../../assets/MDJF/13.jpg"),
          require("../../assets/MDJF/banner3.jpg")
        ]
      };
    },
    computed: {
      isShow() {
        return sessionStorage.getItem("isAuth") === "true" ? true : false;
      }
    },
    // created() {
    //   // 微信签名验证
    //   this.wx.checkJsSdk();
    //   // 获取code ,拉取用户信息openId
    //   this.wxcode = this.getUrlParam("code");
    //   // sessionStorage.setItem("wxCode", this.wxcode);
    //   this.requestAuthorization();
    // },
    methods: {
      // 请求获取用户信息
      // requestAuthorization() {
      //   this.post("community_activity/tologin/userinfo?code=" + this.wxcode)
      //     .then(res => {
      //       sessionStorage.setItem("userInfo", JSON.stringify(res.object));
      //       _self.slow.setApiData("userInfo", res.object);
      //       // 校验系统用户信息，是否已完善信息
      //       this.post("publicUser/loginPublicUser", {
      //         wxid: this.slow.userInfo.openId
      //       })
      //         .then(res => {
      //           console.log("getUserAuth", res);
      //           sessionStorage.setItem("isAuth", res.success);
      //           sessionStorage.setItem("dataAreaCode", res.object.dataAreaCode);
      //           _self.slow.setApiData("isAuth", res.success);
      //           _self.slow.setApiData("authObject", res.object);
      //           // this.$router.push("/home");
      //         })
      //         .catch(err => {
      //           console.log(err.toString());
      //         });
      //     })
      //     .catch(err => {
      //       console.log(err.toString());
      //     });
      // },
      skipOther1() {
        // /AppMediation
        window.open("http://hkqwsxf.dongying.gov.cn/");
      },
      skipOther2() {
        this.$router.push("/conMediationdetail");
        // /AppMediation
        // window.open(
        //   "http://117.73.252.229:8081/a/login;JSESSIONID=2543eab722864a14ba1b991df1738830"
        // );
      },
      back() {
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      },
      conMediationTo(w) {
        switch (w) {
          case 0:
            this.$router.push("/legalKnowledge");
            break;
          case 1:
            this.$router.push("/classicCase");
            break;
          case 2:
            this.$router.push("/commonPro");
            break;
          case 3:
            if (!this.slow.isAuth) {
            // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
              this.$dialog
                .confirm({
                  title: "提示",
                  message: "您还没有认证，是否前去认证？"
                })
                .then(() => {
                  this.$router.push("/register");
                })
                .catch(() => {
                  // setTimeout(() => {
                  //   this.$router.push("/home");
                  // }, 200);
                });
            } else {
              this.$router.push("/legalAdviser");
            }
            break;
          case 4:
            this.$router.push("/DocumentTemplate");
            break;
            // case 8:
            //   this.$router.push("/ptt");
            //   break;
          default:
            this.$router.push("/home");
            break;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .ConMediation {
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .outermostMargin {
      // background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      /*min-height: calc(100vh - 46px);*/
      // margin: 41px 0 0 0;
      // .carousel {
      // margin: 0;
      // padding: 0;
      // height: 28%;
      // width: $sm-img-per-max;
      // img {
      // height: $sm-img-per-max;
      // width: $sm-img-per-max;
      // display: block;
      // }
      // }
      .carousel {
        margin: 0;
        padding: 0;
        height: $sm-img-per-mini;
        width: $sm-img-per-max;
        .carItem {
          width: $sm-img-per-max;
          img {
            width: $sm-img-per-max;
            height: $sm-img-per-max;
          }
        }
      }
      .entranceList {
        padding: $sm-spaceing-block-mini $sm-spaceing-block-base 60px $sm-spaceing-block-base;
        box-sizing: border-box;
        position: fixed;
        bottom: 46px;
        left: 0;
        right: 0;
        top: 169px;
        overflow-y: auto;
        background: $sm-bg-color;
        .entranceBox {
          display: flex;
          flex-direction: column;
          .entranceRow {
            padding: $sm-spacing-col-xl 0 0 0;
            display: flex;
            flex-direction: row nowrap;
            justify-content: space-between;
            align-items: center;
            .lpIcon {
              margin: 0 $sm-spacing-col-lg 0 0;
              padding: 0 0 $sm-spacing-col-lg 0;
              img {
                height: $sm-icon-px-xl;
              }
            }
            .rpIcon {
              flex: 1 1 auto;
              .rpBox {
                display: flex;
                flex-direction: row nowrap;
                justify-content: space-between;
                align-items: center;
                .title {
                  font-weight: bold;
                }
                .iconPt {
                  img {
                    height: $sm-icon-px-bp;
                  }
                }
              }
              .reDivider {
                margin: $sm-spacing-col-xl 0 0 0;
              }
            }
          }
        }
      }
    }
    .bottom-con {
      position: fixed;
      z-index: 100;
      left: 0;
      right: 0;
      bottom: 0;
      height: 46px;
      .actionBar {
        margin: 0;
        padding: 0;
        height: 50px;
        display: flex;
        flex-direction: row nowrap;
        justify-content: center;
        align-items: center;
        width: 100vw;
        position: fixed;
        left: 0;
        bottom: 0;
        .describe {
          height: $sm-img-per-max;
          line-height: 46px;
          text-align: center;
          flex: 1 1 auto;
          color: #939498;
          border: none;
          border-top: 1px solid #e2e3e4;
          box-sizing: border-box;
          background: #ffffff;
        }
        .but {
          border-radius: 0 !important;
          height: $sm-img-per-max;
          flex: 1 1 auto;
          font-size: 16px;
          background: #10b463;
          border: none;
        }
      }
    }
  }
</style>